<template>
  <pageView pageName="memberDetail" :isShowSearch="false"  bannerImage="/img/banner/memberDetailBanner.png">
    <div class="about-view">
      <div class="title-box">
        <p class="title">
          {{isZh ? state.info.actorJob : state.info.actorJobEnglish}}
          -
          {{isZh ? state.info.actorName : state.info.actorNameEnglish}}
        </p>
      </div>
      <img src="/img/activity/a-line.png" alt="">
      <div>
        <p class="introduction">{{$t('memberDetail.introduction')}}</p>
        <div class="introduction-content">{{isZh ? state.info.actorDesc : state.info.actorDescEnglish}}</div>
      </div>
      <img :src="state.info.actorPhoto" alt="" class="actorPhoto">
    </div>
  </pageView>
</template>
<script setup>
import { getWebsiteActorById } from '@/api/api'
import pageView from '@/components/pageView'
import { useIsZh } from '@/utils/useIsZh'
import { reactive } from '@vue/reactivity'
import { useRoute } from 'vue-router'
const route = useRoute()
const {params} = route
const {id} = params
const state = reactive({
  info:''
})
getWebsiteActorById({actorId: id}).then(res => {
  state.info = res;
})
const {isZh} = useIsZh()
</script>

<style lang="scss" scoped>


@media screen and (min-width: 1400px) {
  
  .about-view{
    background: #FFFAF5;
    overflow: hidden;
    .title-box{
      margin-top: 117px;
      padding: 0 80px;
      margin-bottom: 30px;
    }
    .title{
      font-size: 24px;
      font-weight: bold;
      color: #202020;
      text-align: center;
    }
    .right-detail-info{
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      span:last-child{
        display: inline-block;
        margin-left: 20px;
      }
    }
    .content{
      padding: 19px 80px 70px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 30px;
    }
    .introduction,.introduction-content{
      padding: 20px 80px;
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #666666;
      
    }
    .introduction-content{
      padding: 0 80px 80px;
    }
    .actorPhoto{
      width: 50vw;
      display: block;
      margin: 10px auto;
      padding: 20px;
    }
  }
}
@media screen and (max-width: 1401px) {
  .about-view{
    background: #FFFAF5;
    overflow: hidden;
    .title{
      font-size: 12px;
      font-weight: bold;
      color: #202020;
      text-align: center;
      padding: 15px;
    }
    .content{
      padding: 10px;
      font-size: 7px;
      font-weight: 400;
      color: #666666;
      line-height: 15px;
    }
    .introduction,.introduction-content{
      padding: 10px;
      font-size: 7px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #666666;
      
    }
    .introduction-content{
      padding: 0 10px 30px;
    }
  }
  .actorPhoto{
    width: 70vw;
    display: block;
    margin: 10px auto;
    padding: 20px;
  }
}

</style>